<template>
  <div class="edit-profile-form">
    <div class="form-header">
      <h3>编辑个人信息</h3>
      <p>修改您的基本信息</p>
    </div>

    <a-form
      :model="formState"
      :rules="rules"
      layout="vertical"
      @finish="handleSubmit"
      class="profile-form"
    >
      <a-form-item label="昵称" name="nickname">
        <a-input
          v-model:value="formState.nickname"
          placeholder="请输入昵称"
          :maxlength="20"
          show-count
        />
      </a-form-item>

      <a-form-item label="性别" name="gender">
        <a-radio-group v-model:value="formState.gender">
          <a-radio :value="1">男</a-radio>
          <a-radio :value="0">女</a-radio>
          <a-radio :value="undefined">不设置</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="职位" name="job_title">
        <a-input v-model:value="formState.job_title" placeholder="请输入职位" :maxlength="50" />
      </a-form-item>

      <a-form-item label="个人简介" name="introduction">
        <a-textarea
          v-model:value="formState.introduction"
          placeholder="介绍一下自己吧..."
          :rows="4"
          :maxlength="200"
          show-count
        />
      </a-form-item>

      <a-form-item>
        <a-space>
          <a-button type="primary" html-type="submit" :loading="loading" class="submit-btn">
            保存修改
          </a-button>
          <a-button @click="handleCancel"> 取消 </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import type { IUserInfo } from '@/interface/user';
import { useUserStore } from '@/stores/user';
import { message } from 'ant-design-vue';
import { reactive, ref, watch } from 'vue';

interface Props {
  userInfo?: IUserInfo;
  visible: boolean;
}

const props = defineProps<Props>();
const userStore = useUserStore();
const emit = defineEmits<{
  submit: [data: Partial<IUserInfo>];
  cancel: [];
}>();

const loading = ref(false);

const formState = reactive<Partial<IUserInfo>>({
  nickname: '',
  gender: 0,
  job_title: '',
  introduction: '',
});

// 监听用户信息变化，同步到表单
watch(
  () => userStore.userInfo,
  newUserInfo => {
    if (newUserInfo) {
      formState.nickname = newUserInfo.nickname || '';
      formState.gender = newUserInfo.gender;
      formState.job_title = newUserInfo.job_title || '';
      formState.introduction = newUserInfo.introduction || '';
    }
  },
  { immediate: true }
);

const rules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '昵称长度应在2-20个字符之间', trigger: 'blur' },
  ],
  job_title: [{ max: 50, message: '职位名称不能超过50个字符', trigger: 'blur' }],
  introduction: [{ max: 200, message: '个人简介不能超过200个字符', trigger: 'blur' }],
};

const handleSubmit = async () => {
  try {
    loading.value = true;

    // 这里可以添加表单验证
    if (!formState.nickname?.trim()) {
      message.warning('请输入昵称');
      return;
    }

    // 发送更新请求
    emit('submit', { ...formState });
  } catch (error) {
    console.error('保存失败:', error);
    message.error('保存失败，请重试');
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  emit('cancel');
};
</script>

<style lang="less" scoped>
.edit-profile-form {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  .form-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    h3 {
      font-size: 20px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 4px 0;
    }

    p {
      font-size: 14px;
      color: #64748b;
      margin: 0;
    }
  }

  .profile-form {
    padding: 24px;

    :deep(.ant-form-item-label) {
      font-weight: 500;
      color: #374151;
    }

    .ant-input,
    .ant-input-number,
    .ant-textarea {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      transition: all 0.2s ease;

      &:hover,
      &:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
      }
    }

    .ant-radio-group {
      .ant-radio-wrapper {
        margin-right: 16px;
        font-size: 14px;
      }
    }

    .submit-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      border-radius: 8px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      transition: all 0.2s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .ant-btn:not(.submit-btn) {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      color: #64748b;
      transition: all 0.2s ease;

      &:hover {
        border-color: #667eea;
        color: #667eea;
      }
    }
  }
}
</style>
